import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Button, Toast } from 'antd-mobile';
import { HeartOutline, StarOutline } from 'antd-mobile-icons';
import Navbar from '../../compounts/navber/Navbar';
// import './detail.module.css';

function DetailPage() {
    const location = useLocation();
    const navigate = useNavigate();
    const [detailData, setDetailData] = useState(null);
    const [isLiked, setIsLiked] = useState(false);
    const [isCollected, setIsCollected] = useState(false);

    // 从路由参数获取详情数据
    useEffect(() => {
        if (location.state) {
            setDetailData(location.state);
        }
    }, [location.state]);

    // 处理返回
    const handleBack = () => {
        navigate(-1);
    };

    // 处理点赞
    const handleLike = () => {
        setIsLiked(!isLiked);
        Toast.show({ 
            content: isLiked ? '取消点赞' : '点赞成功', 
            duration: 1000 
        });
    };

    // 处理收藏
    const handleCollect = () => {
        setIsCollected(!isCollected);
        Toast.show({ 
            content: isCollected ? '取消收藏' : '收藏成功', 
            duration: 1000 
        });
    };

    // 处理分享
    const handleShare = () => {
        Toast.show({ 
            content: '分享功能开发中...', 
            duration: 1000 
        });
    };

    // 如果没有数据，显示加载状态
    if (!detailData) {
        return (
            <div style={{ paddingTop: '45px', minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
                <Navbar title="详情" />
                <div style={{ textAlign: 'center', padding: '40px 0' }}>
                    <div style={{ fontSize: '16px', color: '#666' }}>加载中...</div>
                </div>
            </div>
        );
    }

    return (
        <div style={{ paddingTop: '45px', minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
            <Navbar title={detailData.title || '详情'} />
            
            {/* 顶部图片区域 */}
            {detailData.image && (
                <div style={{ 
                    width: '100%', 
                    height: '200px', 
                    position: 'relative',
                    overflow: 'hidden'
                }}>
                    <img 
                        src={detailData.image} 
                        alt={detailData.title || '详情图片'}
                        style={{ 
                            width: '100%', 
                            height: '100%', 
                            objectFit: 'cover'
                        }} 
                    />
                    {/* 图片遮罩 */}
                    <div style={{
                        position: 'absolute',
                        bottom: 0,
                        left: 0,
                        right: 0,
                        height: '60px',
                        background: 'linear-gradient(transparent, rgba(0,0,0,0.6))'
                    }}></div>
                </div>
            )}

            {/* 内容区域 */}
            <div style={{ 
                backgroundColor: '#fff', 
                margin: '16px',
                borderRadius: '12px',
                padding: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
                {/* 标题和操作按钮 */}
                <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'flex-start',
                    marginBottom: '20px'
                }}>
                    <div style={{ flex: 1 }}>
                        <h1 style={{ 
                            fontSize: '20px', 
                            fontWeight: 'bold', 
                            color: '#333',
                            margin: '0 0 8px 0',
                            lineHeight: '1.4'
                        }}>
                            {detailData.title || '详情标题'}
                        </h1>
                        {detailData.subtitle && (
                            <div style={{ 
                                fontSize: '14px', 
                                color: '#666',
                                lineHeight: '1.4'
                            }}>
                                {detailData.subtitle}
                            </div>
                        )}
                    </div>
                    
                    {/* 操作按钮 */}
                    <div style={{ 
                        display: 'flex', 
                        gap: '12px',
                        marginLeft: '16px'
                    }}>
                        <Button
                            size='small'
                            fill='none'
                            onClick={handleLike}
                            style={{ 
                                padding: '8px',
                                minWidth: 'auto',
                                color: isLiked ? '#ff4d4f' : '#999'
                            }}
                        >
                            <HeartOutline style={{ fontSize: '18px' }} />
                        </Button>
                        <Button
                            size='small'
                            fill='none'
                            onClick={handleCollect}
                            style={{ 
                                padding: '8px',
                                minWidth: 'auto',
                                color: isCollected ? '#faad14' : '#999'
                            }}
                        >
                            <StarOutline style={{ fontSize: '18px' }} />
                        </Button>
                        <Button
                            size='small'
                            fill='none'
                            onClick={handleShare}
                            style={{ 
                                padding: '8px',
                                minWidth: 'auto',
                                color: '#999'
                            }}
                        >
                            📤
                        </Button>
                    </div>
                </div>

                {/* 标签信息 */}
                {detailData.tags && detailData.tags.length > 0 && (
                    <div style={{ 
                        display: 'flex', 
                        flexWrap: 'wrap', 
                        gap: '8px',
                        marginBottom: '20px'
                    }}>
                        {detailData.tags.map((tag, index) => (
                            <span key={index} style={{
                                backgroundColor: '#f0f0f0',
                                color: '#666',
                                fontSize: '12px',
                                padding: '4px 8px',
                                borderRadius: '12px'
                            }}>
                                {tag}
                            </span>
                        ))}
                    </div>
                )}

                {/* 详细信息 */}
                <div style={{ 
                    fontSize: '14px', 
                    color: '#333',
                    lineHeight: '1.8',
                    marginBottom: '20px'
                }}>
                    {detailData.description || '这里是详细内容描述...'}
                </div>

                {/* 额外信息 */}
                {detailData.extraInfo && (
                    <div style={{ 
                        backgroundColor: '#f8f9fa',
                        padding: '16px',
                        borderRadius: '8px',
                        marginBottom: '20px'
                    }}>
                        <div style={{ 
                            fontSize: '14px', 
                            fontWeight: 'bold',
                            color: '#333',
                            marginBottom: '8px'
                        }}>
                            相关信息
                        </div>
                        <div style={{ 
                            fontSize: '13px', 
                            color: '#666',
                            lineHeight: '1.6'
                        }}>
                            {detailData.extraInfo}
                        </div>
                    </div>
                )}

                {/* 操作按钮区域 */}
                <div style={{ 
                    display: 'flex', 
                    gap: '12px',
                    marginTop: '30px'
                }}>
                    <Button
                        block
                        color='primary'
                        size='large'
                        style={{ 
                            borderRadius: '8px',
                            height: '44px'
                        }}
                    >
                        立即咨询
                    </Button>
                    <Button
                        block
                        fill='outline'
                        size='large'
                        style={{ 
                            borderRadius: '8px',
                            height: '44px'
                        }}
                    >
                        预约挂号
                    </Button>
                </div>
            </div>

            {/* 底部间距 */}
            <div style={{ height: '80px' }}></div>
        </div>
    );
}

export default DetailPage;
